<template>
<div class="goods-detail-container container-1200">
    <div class="wy-main-title wy-m-t-20">
          <p>首页  /  物流信息服务  /   <span>{{detail.beginPlace}}——{{detail.endPlace}}</span></p>
    </div>
    <div class="goods-detail-leftInformaion">
          <div class="goods-city-information">
              <h2>{{detail.beginPlace}}——{{detail.endPlace}}</h2>
              <div>
                    <span>距离：<i>{{detail.distance}}km</i></span>
                    <span>发布时间：{{detail.createTime}}</span>
                    <span>浏览量:{{detail.lookNums}}次</span>
              </div>
          </div>
         <!-- 列表 -->
          <div class="goods-list-detail">
            <ul>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">出发地</div>
                     <div class="Infor-cont wy-text-nowrap"> {{detail.beginPlace || '暂无'}}</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">详细地址</div>
                     <div class="Infor-cont wy-text-nowrap"> {{detail.fromStreet || '暂无'}}</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">到达地</div>
                     <div class="Infor-cont wy-text-nowrap"> {{detail.endPlace || '暂无'}}</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">详细地址</div>
                     <div class="Infor-cont wy-text-nowrap"> {{detail.toStreet || '暂无'}}</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">运输类型</div>
                     <div class="Infor-cont" v-if="detail.type === 1 ">零担</div>
                     <div class="Infor-cont" v-if="detail.type === 2 ">整车</div>
                     <div class="Infor-cont" v-if="detail.type === 3 ">同城</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">有效期</div>
                     <div class="Infor-cont"> {{detail.validDay || '暂无'}}天</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">联系人</div>
                     <div class="Infor-cont" > {{detail.sendPerson || '暂无'}}<a href="/login" style="margin-left: 10px" v-if="!loggedIn">登录查看</a></div>
                     <!-- <div class="Infor-cont" v-if="loggedIn"> {{detail.sendPerson || '暂无'}}</div>
                     <div class="Infor-cont" v-if="!loggedIn">登录后可查看</div> -->
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">联系电话</div>
                     <div class="Infor-cont"> {{detail.sendMobile || '暂无'}}<a href="/login" style="margin-left: 10px" v-if="!loggedIn">登录查看</a></div>
                    <!--  <div class="Infor-cont" v-if="loggedIn"> {{detail.sendMobile || '暂无'}}</div>
                     <div class="Infor-cont" v-if="!loggedIn">登录后可查看</div> -->
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">说明</div>
                     <div class="Infor-cont" style="width: 620px"> {{detail.remark || '暂无'}}</div>
                   </div>
              </li>
              <li class="ant-list-item">
                   <div class="ant-list-item-content ant-list-item-content-single">
                     <div class="Infor-title">是否长期货源</div>
                     <div class="Infor-cont" v-if="detail.longCargo ==1">是</div>
                     <div class="Infor-cont" v-if="detail.longCargo ==0">否</div>
                   </div>
              </li>
            </ul>
            <p><i>*</i>温馨提示：联系我时，请说明是从云南国际物流云上看到的信息，谢谢</p>
            <div class="goods-btn-search">
                <a-button class='ant-btn-danger' v-if="loggedIn&&loggedUser.attestationStatus==111" type='danger' @click="elasticShowModal(detail.userId)">立即沟通</a-button>
                <a-button class='ant-btn-danger' v-if="loggedIn&&loggedUser.attestationStatus!=111" type='danger' @click="TipsShowModal(detail.userId)">立即沟通</a-button>
                <router-link v-if="!loggedIn" to="/login">
                    <a-button class='ant-btn-danger' type='danger'>立即沟通</a-button>
                </router-link>
            </div>
          </div>
         <!-- 货源信息 -->
          <div class="goods-inforamtion-detail">
              <div class="goods-title-750">
                  货源信息
              </div>
              <div class="goods-part" v-for="(item,index) in detail.cargos" :key="index">
                  <div class="goods-change-pic">
                      <page-carousel v-if="item.cargoPics.split(',').length>1" :carouselList="item.cargoPics.split(',')"></page-carousel>
                      <img class="good-only-pic" v-if="item.cargoPics.split(',').length==1" :src="FileUploadUrl2+item.cargoPics">
                  </div>
                  <div class="goods-changePic-detail">
                         <p>货物名称：<span>{{item.cargoName || '暂无'}}</span></p>
                         <p>货源类型：
                              <span v-if="item.cargoType == 1">轻货</span>
                              <span v-if="item.cargoType == 2">重货</span>
                          </p>
                         <p>货物体积：<span>{{item.volume || '暂无'}}{{item.volumeUnit}}</span></p>
                         <p>货物重量：<span><i>{{item.weight || '暂无'}}</i>{{item.weightUnit}}</span></p>
                         <p class="wy-text-nowrap-2">货物简介：<span>{{item.comment}}</span></p>
                  </div>
              </div>
           
          </div>
        <!-- 货源评价 -->
          <div class="goods-sourceEvaluation">
                <div class="goods-title-750">
                    货源信息
                    <a href="javascript:;"  @click="watchEval" v-if="loggedIn">查看全部评价</a>
                    <router-link v-if="!loggedIn" to="/login">查看全部评价</router-link>
                </div>
                <div class="goods-sourceDetail">
                      <p>以下是此车源的短评词条，联系该车源后点击添加您的印象。</p>
                      <div class="v-tag">
                          <!-- <a-tag v-for="(item,index) in tagsData" :key="index" @click="tagevClick(index)" :class="item.class">{{item.name}}</a-tag> -->
                          <span v-for="(item,index) in tagsData" :key="index" @click="tagevClick(index)" class="ant-tags" :class="item.class">{{item.name}}</span>
                          <a-textarea placeholder="请写下您的宝贵意见，您的真实、有效评价可以帮助其他人哦" v-model="tagsEvent"></a-textarea>
                      </div>
                      <div class="goods-btn-search">
                          <router-link v-if="!loggedIn" to="/login"> 
                              <a-button type="danger">立即评价</a-button>
                          </router-link>
                          <a-button type="danger" @click="evaluationInterface" v-if="loggedIn">立即评价</a-button>
                      </div>
                </div>
          </div>
           <!-- 评价列表 -->
            <div class="evaluation-box" v-show="zhanShi">
                  <div class="eval-title">
                       <span>全部评价</span>
                       <i @click="disapperarClick"> 
                        <img src="./../../.././static/img/info/quxiao.png" alt="" />
                      </i>
                  </div>
                  <a-list :dataSource="evalLists" class="eval-list" :pagination="pagination"> 
                      <a-list-item slot="renderItem" slot-scope="item, index">
                          <div>用户名：{{item.userName || '暂无'}}</div>
                          <div>评价：{{item.content || '暂无'}}</div>
                          <div>{{item.createTime&&item.createTime.split(' ')[0]}}</div>
                      </a-list-item>
                  </a-list>
            </div>
        <!-- 公司简介 -->
          <div class="goods-company-detail">
                <div class="goods-title-750">
                    公司简介
                  <nuxt-link :to="`./../../corp`">进入企业主页</nuxt-link>
                </div>
                <div class="goods-company-content">
                        <p>{{concatDetail.companyBriefRemark || '暂无'}}
                        </p>
                </div>
          </div>
        <!-- 智能车源 -->
          <div class="v-recommend">
                <div class="goods-title-750">
                    智能推荐货源
                </div>
               <!-- 车源列表 -->
                 <!-- 车源列表 -->
                <div class="goods-carList">
                    <!-- <a-table :columns="columns" :dataSource="recodata" :pagination='false'>
                            <a slot="action" slot-scope="text" href="javascript:;">查看详情</a>
                     </a-table> -->
                      <div class="goods-car-list">
                         <ul>
                            <li>出发地-到达地</li>
                            <li>货物名称</li>
                            <li>货源类型</li>
                            <li>体积</li>
                            <li>重量</li>
                            <li>发布时间</li>
                            <li>查看</li>
                         </ul>
                      </div>
                      <div class="goods-car-listTitle"  v-for="(item,index) in recodata" :key="index">
                          <div>
                            <p>{{item.beginPlace}}</p>
                            <p>{{item.endPlace}}</p>
                          </div>
                          <div>{{item.cargoTitle}}</div>
                          <div v-if="item.type == 1">轻货</div>
                          <div v-if="item.type != 1">重货</div>
                          <div>{{item.volume}}立方米</div>
                          <div>{{item.weight}}吨</div>
                          <div>{{item.createTime&&item.createTime.split(' ')[0]}}</div>
                          <div> <nuxt-link :to="`./${item.cargoId}`">查看详情</nuxt-link></div>
                      </div>
                </div>
          </div>
    </div>
   <!-- 右边 -->
    <div class="goods-concat">
        <div class="tnder-main-title">联系方式</div>
        <div class="concat-content">
            <h3>{{concatDetail.company}}</h3>
            <div v-if="concatDetail.starLevel">
                <span>用户星级</span>
                <a-rate :defaultValue="concatDetail.starLevel" disabled allowHalf />
            </div>
        </div>
        <div class="concat-renzhen">{{concatDetail.attestationStatusValue}}</div>
        <!-- 分割线 -->
        <div class="concat-line"></div>
        <p>公司地址：{{concatDetail.companyAddress || '暂无'}}</p>
        <p>详细地址：{{concatDetail.detailAddress || '暂无'}}</p>
        <p>成立时间：{{concatDetail.companyCreateTime&&concatDetail.companyCreateTime.split(' ')[0]}}</p>
        <p>联系人：{{concatDetail.legalPerson || '暂无'}}</p>
        <div class="otehr-product-information">
            <div class="tnder-main-title">公司其他货源信息</div>
            <div class="other-product-lsit">
               <ul>
                  <li v-for="(item,index) in details" :key="index">
                    <nuxt-link :to="`./${item.cargoId}`">
                      <div class="other-pic">
                         <img :src="FileUploadUrl2+item.cargos[0].cargoPics">
                      </div>
                      <div class="other-val">{{item.cargos[0].cargoName}}</div>
                    </nuxt-link>
                  </li>
               </ul>
            </div>
        </div>
    </div>
       <!-- 弹框 -->
    <Elastic :type="type"  ref='elastic'></Elastic>
      <!-- 提示认证弹框 -->
    <Elastics  ref='elastics'></Elastics>
</div>
</template>

<script>
import PageCarousel from './../../../components/ui/GoodsPageCarousel'
import Elastic from './../../../components/dialog/Elastic'
import Elastics from '@/components/dialog/Elastics'
import { environment } from './../../../server/environment'
import AuthMixin from '~/mixins/auth'
export default {
    mixins: [ AuthMixin ],
    components: {
      PageCarousel,
      Elastic,
      Elastics
    },
    async asyncData ({ app, $axios, params, query, error }) {
        const returnData = {}
        const id = params.id
        try {
            const { data } = await $axios.$get('/api/info/infoCargomaster/open/getCargosmasterById/'+id, { params: {} })
            returnData.detail = data;
        } catch (err) {
            return error({ statusCode: err.code, msg: err.msg })
        }
        return returnData
    },
    data () {
      return {
        tagsEvent: '',
        type: '',
        recodata: [],
        zhanShi:false,//数据列表默认状态
        evalLists: '',// 全部评价列表
        FileUploadUrl2:environment.FileUploadUrl2,
        details: {},
        tagsData: [
            {
              name:"满意",
              class: '',
            },
            {
              name:"货已发出",
              class: '',
            },
            {
              name:"电话不通",
              class: '',
            },
            {
              name:"货物运输困难",
              class: '',
            },
            {
              name:"需求货物押金",
              class: ''
            },
        ],
            // 表格分页
        pagination: {
          pageSizeOptions: ['10', '20', '30', '50', '100'],
          current: 1,
          pageSize: 5,
          // showSizeChanger: true,
          total: 0,
          showTotal: (total, range) => `共 ${total} 条记录`,
          onChange: (page) => {
              this.pagination.current = page
              this.allEvalList()
          }

        },
        carouselList: [
          {
            img: require('./../../../static/img/transport/avabanner.png')
          },{
            img: require('./../../../static/img/transport/avaBannerSecond.png')
          },{
            img: require('./../../../static/img/transport/avaBannerFirst.png')
          }
         ],
        data:[],
        detail: {}, // 货源详细信息
        concatDetail: {},//联系方式
     }
    },
    created(){
      if (this.detail.userId){
        this.supplyGetOtherrById();
        this.concatUserID(this.detail.userId);
        this.infogoodsGetCargoByType();
      }
      // else{
      //   this.carGetCargosmasterById(this.$route.params.id);
      // }
      if(this.loggedIn) this.allEvalList();
      // this.supplyGetCargosmasterById(this.$route.params.id);
    },
    watch:{
      '$route':function(){
        if(this.detail.userId){
          this.supplyGetOtherrById();
          this.concatUserID(this.detail.userId);
          this.infogoodsGetCargoByType();
        }
      }
    },
    methods: {
      // 未认证弹窗
      TipsShowModal(id){
        this.$refs.elastics.warning(id);
      },
      // 获取货源详情信息                                        
      async supplyGetCargosmasterById (id) {
            const res = await this.$store.dispatch('info/supplyGetCargosmasterById',id)
            if (res.status) {
              this.detail = res.data;
              this.concatUserID(this.detail.userId);
            } 
      },
          // 智能推荐车源
      async infogoodsGetCargoByType () {
        const res = await this.$store.dispatch('info/infogoodsGetCargoByType',{
          cargoId: this.detail.cargoId,
          volumePrice: this.detail.volumePrice,
          masterCargoType: this.detail.masterCargoType,
          weightPrice: this.detail.weightPrice,
        })
        if (res.status) {
          this.recodata = res.data.rows;
        } 
      },
       // 获取货源其他详情信息
      async supplyGetOtherrById () {
          const res = await this.$store.dispatch('info/supplyGetOtherrById',{
              cargoId: this.detail.cargoId,
              companyId: this.detail.userId,
          })
          if (res.status) {
            this.details = res.data;
          } 
      },
       // 查看全部评价
      watchEval(){
         this.zhanShi = true;
      },
      // 隐藏评价列表
      disapperarClick(){
         this.zhanShi = false;
      },
       // 联系方式
      async concatUserID (id) {
          const res = await this.$store.dispatch('info/concatUserID',id)
          // if (res.status) {
            this.concatDetail = res;
            // console.log(this.concatDetail,111);
          // } 
      },
        // 评论接口
      async evaluationInterface (){
        if(this.loggedUser.attestationStatus == '111'){
             if(this.tagsEvent){
                var message = {}
                message.content = this.tagsEvent;//评论内容
                message.type = 2;//货源
                const res = await this.$store.dispatch('info/evaluationInterface',message,true)
                this.$message.success('评价成功');
                this.allEvalList();
              }else{
                this.$message.error("请输入评价内容！");
              }
        }else{
              this.$warning({
                title: '未认证无法进行评价！',
              });
        }
       
        // if (res.status) {
        // }
      },
      // 全部评价列表数据
      async allEvalList () {
          const res = await this.$store.dispatch('info/allEvalList',{
              // pageSize: this.pagination.pageSize,
              pageSize: this.pagination.pageSize,
              pageNum: this.pagination.current,
              type: 2,
          });
          if (res.status) {
            this.evalLists = res.data.rows;
            // console.log(this.evalLists,123);
            this.pagination.total =  res.data.total;
          } 
      },
     
       // 弹框
      elasticShowModal(id){
           this.$refs.elastic.showModal(id);
      },
       //标签事件
      tagevClick(index){
          for(var i in this.tagsData) {
            if(i == index) {
              if(!this.tagsData[i].class) {
                this.tagsData[i].class = 'tagActive'
                this.tagsEvent += this.tagsData[i].name+'，'
              }else {
                this.tagsData[i].class = ''
                this.tagsEvent = this.tagsEvent.split(this.tagsData[i].name+'，').join("");
              }
            }
        }
      }
    } 
  }
</script>
<style lang="scss">
@import "./../../../assets/css/info/goodsDetail.scss";
.goods-carList{
   width: 750px;
   // height: 400px;
  .goods-car-list{
      width: 750px;
      height: 40px;
      background: #F7F7F7;
      font-size: 16px;
      color: #333333;
      line-height: 40px;
      li{
        float:left;
        text-align: center;
      }
      li:nth-child(1){
        width: 200px;
      }
      li:nth-child(2){
        width: 150px;
      }
      li:nth-child(3){
        width: 100px;
      }
      li:nth-child(4){
        width: 60px;
      }
      li:nth-child(5){
        width: 60px;
      }
       li:nth-child(6){
        width: 100px;
      }
      li:nth-child(7){
        width: 75px;
      }
  }
  .goods-car-listTitle{
      width: 750px;
      height:55px;
      text-align: center;
      line-height: 55px;
      border-bottom: 1px solid #D8D8D8;
      clear: both;
      div{
        float:left;
        height: 55px;
        text-align: center;
        font-size: 14px;
        a{
           color:#15837A;
        }
      }
      div:nth-child(1){
        width: 200px;
        line-height: 8px;
        padding-top: 10px;
      }
      div:nth-child(2){
        width: 150px;
      }
      div:nth-child(3){
        width: 100px;
      }
      div:nth-child(4){
        width: 60px;
      }
      div:nth-child(5){
        width: 60px;
      }
      div:nth-child(6){
        width: 100px;
      }
      div:nth-child(7){
        width: 75px;
      }
    }
}
</style>